<template>
  <div style="margin-top: 50px">
    <el-form :model="value" ref="productAttrForm" label-width="120px"  size="small">

      <el-row  v-for="(item,index) in speList" :key="index">
        <el-col :span="20">

            <el-form-item label="商品规格：">
              <el-select
              @change="speChange"
                v-model="speList[index]"
                placeholder="请选择规格">
                <el-option
                  v-for="item in specification"
                  :key="item.sid"
                  :label="item.sname"
                  :disabled="item.disabled"
                  :value="item.sid">
                </el-option>
              </el-select>
            </el-form-item>

        </el-col>

        <el-col :span="4" v-if="index==0">
          <el-button size="medium" :disabled="addShow" @click="addList()">新增规格</el-button>
        </el-col>

        <el-col :span="4" v-if="index!=0">
          <el-button size="medium" type="danger" @click="deleteList(item,index)">删除规格</el-button>
        </el-col>

      </el-row>
     

      




       
      <el-form-item style="text-align: center">
        <el-button size="medium" @click="handlePrev">上一步，填写商品信息</el-button>
        <el-button type="primary" size="medium" @click="handleNext">下一步，完善商品规格</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
  // import {fetchList as fetchProductAttrCateList} from '@/api/productAttrCate'
  // import {fetchList as fetchProductAttrList} from '@/api/productAttr'
  // import SingleUpload from '@/components/Upload/singleUpload'
  // import MultiUpload from '@/components/Upload/multiUpload'
  // import Tinymce from '@/components/Tinymce'
import {getSpec} from '@/api/addProduct'
  export default {
    name: "ProductAttrDetail",
    // components: {SingleUpload, MultiUpload, Tinymce},
    props: {
      value: Object,
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    watch:{
      speList(){
        
        this.addShow=this.speList.length<this.specification.length?false:true;
      }
    },
    data() {
      return {
        specification:[],
        speList:[''],
        addShow:false
      }
    },
   
    created() {
      this.getSelect();
      console.log(this.value);
    },
  
    methods: {
      // 新增一行
      addList(){
          
            this.speList.push('');

      },
      // 删除一行
      deleteList(item,index){
        this.speList.splice(index,1)
        this.specification.map(res=>{
            res.disabled=false;
        })
        this.speList.map(msg=>{
         if(msg!=''){
           this.specification.map(res=>{
             if(msg==res.sid){
                res.disabled=true;
             }
           })
         }
       })
      },
      // 规格下拉框
      async getSelect(){
        let res = await getSpec();
        let list=res.obj;
        list.map(msg=>{
            this.$set(msg,'disabled',false);
        })
        this.specification=list;
        console.log(this.specification);
     },
    //  选完值
     speChange(){
       this.specification.map(res=>{
            res.disabled=false;
        })
       this.speList.map(msg=>{
         if(msg!=''){
           this.specification.map(res=>{
             if(msg==res.sid){
                res.disabled=true;
             }
           })
         }
       })
     },
      
    
      // 上一步
      handlePrev() {
        this.$emit('prevStep')
      },
      // 下一步
     async handleNext() {
       let state=true;
       await this.speList.map(msg=>{
            if(msg==''){
              state=false;
            }
        })
        if(state){
             console.log(this.speList);
             let psrele = this.speList.map(msg=>{
               return {sid:msg}
             })
             this.value.psrele=psrele;
             console.log(this.value);
             this.$emit('nextStep')

        }else{
              this.$message({
                type: 'error',
                message: '请完成规格选择',
                duration:1000
              });
        }
      }
    }
  }
</script>

<style scoped>
  .littleMarginLeft {
    margin-left: 10px;
  }

  .littleMarginTop {
    margin-top: 10px;
  }

  .paramInput {
    width: 250px;
  }

  .paramInputLabel {
    display: inline-block;
    width: 100px;
    text-align: right;
    padding-right: 10px
  }

  .cardBg {
    background: #F8F9FC;
  }
</style>
